<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" @click="goPage('ASN')">
        <chart-card :loading="loading" title="ASN单量" :total="asnTotal | NumberFormat"
                    style="background-color: #D4F2E7;cursor: pointer">
          <a-tooltip :title="asnTitle" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <template slot="footer">今日单量：<span>
            {{ asnToday }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" @click="goPage('PICK')">
        <chart-card :loading="loading" title="拣货单量" :total="pickTotal | NumberFormat"
                    style="background-color: #F0F8FF;cursor: pointer">
          <a-tooltip :title="pickTitle" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <template slot="footer">今日单量：<span>{{ pickToday }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" @click="goPage('TASK')">
        <chart-card :loading="loading" title="作业单量" :total="taskTotal | NumberFormat"
                    style="background-color: #FFEBCD;cursor: pointer">
          <a-tooltip :title="taskTitle" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <template slot="footer">今日单量：<span>{{ taskToday }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" @click="goPage('INV')">
        <chart-card :loading="loading" title="库存量" :total="invTotal | NumberFormat"
                    style="background-color: #F0FFFF;cursor: pointer">
          <a-tooltip :title="invTitle" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <template slot="footer">今日库存：<span>{{ invToday }}</span></template>
        </chart-card>
      </a-col>
    </a-row>

    <a-row :gutter="12">
      <a-card  :class="{ 'anty-list-cust':true }" :bordered="false">
      <!-- table区域-begin -->
      <div>
        <vxe-grid
          style="width: 100%;"
          :height="520"
          size="mini"
          align="center"
          highlight-hover-row
          stripe
          row-key
          row-id="selectedRowKeys"
          column-min-width="150"
          id="id"
          keep-source
          :loading="loading"
          border
          auto-resize
          resizable
          showOverflow
          showHeaderOverflow
          :pager-config="tablePage"
          ref="xGrid"
          :row-config="{ useKey: true,keyField: 'id',isCurrent:true,isHover:true}"
          :checkbox-config="{
          checkRowKeys:selectedRowKeys,
          trigger: 'row',
          highlight: true,
          reserve: true}"
          @sort-change="sortChange"
          @checkbox-change="checkboxChangeEvent"
          @checkbox-all="checkboxChangeEvent"
          :data="dataSource"
          :columns="columns"
          @page-change="handlePageChange"
        >
          <template v-slot:top>
            <!-- 操作按钮区域 -->
            <div class="table-operator">
              <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                  <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
                  <a-menu-item key="1" @click="resetCount"><a-icon type="redo"/>重置次数</a-menu-item>
                </a-menu>
                <a-button type="primary" icon="down">批量操作</a-button>
              </a-dropdown>
            </div>
          </template>
          <template v-slot:codeRender="{ row }">
            <a-tooltip>
              <template #title>
                <a-icon type="copy" @click="copyInfo(row.scheduleCode)" style="color: #40E0D0"></a-icon>
                <a-divider type="vertical"/>
                <span style="color: #40E0D0">复制</span>
              </template>
              <a-tag  color="geekblue">{{row.scheduleCode}}</a-tag>
            </a-tooltip>
          </template>
          <template v-slot:empty>
            <a-empty />
          </template>
        </vxe-grid>
      </div>
      <!-- table区域-end -->
      </a-card>
    </a-row>
  </div>
</template>

<script>

import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import ChartCard from '@/components/ChartCard'
import MiniBar from '@/components/chart/MiniBar'
import MiniArea from '@/components/chart/MiniArea'
import IndexBar from '@/components/chart/IndexBar'
import BarMultid from '@/components/chart/BarMultid'
import DashChartDemo from '@/components/chart/DashChartDemo'
import {HYListMixin} from '@/mixins/HYListMixin'
import {postAction,getAction} from "@api/manage";

export default {
  name: "IndexBdc",
  mixins: [HYListMixin],
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    DashChartDemo,
    BarMultid,
    IndexBar
  },
  data() {
    return {
      loading: false,
      asnTitle: "仓库收货单",
      pickTitle: "仓库拣货单",
      taskTitle: "仓库作业单",
      invTitle: "仓库库存量",
      asnTotal:0,
      asnToday:0,
      pickTotal:0,
      pickToday:0,
      taskTotal:0,
      taskToday:0,
      invTotal:0,
      invToday:0,
      columns: [
        {type: "checkbox", width: 50, align: "center"},
        {type: "seq", width: 50, align: "center"},
        {title: '消息类型', align: "center", field: 'scheduleType_dictText'},
        {title: '消息状态', align: "center", field: 'scheduleStatus_dictText'},
        {title: '执行次数', align: "center", field: 'scheduleNum'},
        {title: '业务编码', align: "center", field: 'scheduleCode',slots: { default: 'codeRender'}},
        {title: '执行内容', align: "center", field: 'remark'},
        {title: '创建人', align: "center", field: 'createBy'},
        {title: '创建日期', align: "center", width: 200, field: 'createTime'},
        {title: '更新人', align: "center", field: 'updateBy'},
        {title: '更新日期', align: "center", width: 200, field: 'updateTime'},
      ],
      url: {
        list: "/core/wmsScheduleJob/list",
        indexUrl: "/core/wmsScheduleJob/indexInfo",
        resetUrl: "/core/wmsScheduleJob/resetCount",
        deleteBatch: "/core/wmsScheduleJob/deleteBatch"
      },
    }
  },
  methods: {
    loadData(){
      this.loading = true;
      getAction(this.url.list).then(res => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.tablePage.total = res.result.total;
          if (
            res.result.records.length == 0 &&
            this.tablePage.currentPage != 1
          ) {
            this.tablePage.currentPage = this.tablePage.currentPage - 1;
            this.loadData();
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message);
        }
      });
      getAction(this.url.indexUrl).then(res => {
        if (res.success) {
          this.asnTotal = res.result.asnTotal;
          this.asnToday = res.result.asnToday;
          this.pickTotal = res.result.pickTotal;
          this.pickToday = res.result.pickToday;
          this.taskTotal = res.result.taskTotal;
          this.taskToday = res.result.taskToday;
          this.invTotal = res.result.invTotal;
          this.invToday = res.result.invToday;
        }
        if (res.code === 510) {
          this.$message.warning(res.message);
        }
        this.loading = false;
      })
    },
    goPage(index) {
      if (index === 'ASN') {
        this.$router.push({path: '/core/receiving/asn'});
      } else if (index === 'PICK') {
        this.$router.push({path: '/core/picking/pickticket'});
      } else if (index === 'TASK') {
        this.$router.push({path: '/core/receiving/pu'});
      } else if (index === 'INV') {
        this.$router.push({path: '/core/inventory/invquery'});
      }
    },
    resetCount(){
      let params = new URLSearchParams();
      params.append('jobIds', this.selectedRowKeys.toString());
      postAction(this.url.resetUrl, params).then((res)=>{
        if (res.success) {
          this.$message.success(res.message);
          this.modalFormOk();
        }else{
          this.$message.warning(res.message);
        }
      })
    },
  },
}
</script>
